import React from 'react';
import type { Article } from '@/type/NotifyType';
import './NotifyItem.scss';
import { Image, List } from 'antd-mobile';

interface NotifyItemProps {
  notify: Article;
}

const NotifyItem: React.FunctionComponent<NotifyItemProps> = ({ notify }) => {
  const renderNotifyItem = () => {
    if (notify.cover.type === 0) {
      return (
        <List>
          <List.Item>
            <div className="type-0">
              <div className="top">
                <span>{notify.title}</span>
              </div>
              <div className="bottom">
                <span>{notify.aut_name}</span>
                <span>{notify.comm_count}评论</span>
                <span>{notify.pubdate}</span>
              </div>
            </div>
          </List.Item>
        </List>
      );
    } else if (notify.cover.type === 1) {
      return (
        <List>
          <List.Item>
            <div className="type-1">
              <div className="left">
                <div className="top">
                  <span>{notify.title}</span>
                </div>
                <div className="bottom">
                  <span>{notify.aut_name}</span>
                  <span>{notify.comm_count}评论</span>
                  <span>{notify.pubdate}</span>
                </div>
              </div>
              <div className="right">
                <Image src={notify.cover.images[0]}></Image>
              </div>
            </div>
          </List.Item>
        </List>
      );
    } else {
      return (
        <List>
          <List.Item>
            <div className="type-3">
              <div className="top">
                <span>{notify.title}</span>
              </div>
              <div className="center">
                <Image src={notify.cover.images[0]}></Image>
                <Image src={notify.cover.images[1]}></Image>
                <Image src={notify.cover.images[2]}></Image>
              </div>
              <div className="bottom">
                <span>{notify.aut_name}</span>
                <span>{notify.comm_count}评论</span>
                <span>{notify.pubdate}</span>
              </div>
            </div>
          </List.Item>
        </List>
      );
    }
  };
  return (
    <div className="notify-item">
      {
        renderNotifyItem()
      }
    </div>
  );
};

export default NotifyItem;